<template>
	<view class="content">
		<view class="logo">
			<image src="/static/ssmall/login-logo@3x.png"></image>
		</view>
		<view class="login-item">
			<view class="phone">
				<image src="/static/ssmall/icon_phone@3x.png"></image>
				<input class="input-item" type="number" v-model="phoneNum" placeholder="请输入手机号码" focus="true" />
			</view>
			<view class="password">
				<image src="/static/ssmall/set_icon_zhanghyaq@3x.png"></image>
				<input class="input-item" type="text" v-model="password" :password="isHidden" placeholder="请输入密码" />
				<image :src="eyeImg" @click="showPwd" style="width: 34rpx; height: 20rpx;"></image>
			</view>
		</view>
		<button size="default" class="login-button" @click="tologin">登录</button>
		<view class="quickly-login">
			<view class="line"></view>
			<view class="title">快捷登录</view>
			<view class="line"></view>
		</view>
		<view class="thirdlogin">
			<image src="/static/ssmall/share_weixin@3x.png" @click="wxlogin"></image>
		</view>
	</view>
</template>

<script>
	import {
		mapMutations
	} from 'vuex';

	export default {
		data() {
			return {
				phoneNum: '',
				password: '',
				isHidden: true,
				eyeImg: '',
				logining: false
			}
		},
		onLoad() {
			this.eyeImg = '/static/ssmall/eye@3x.png';
		},
		methods: {
			...mapMutations(['login']),
			showPwd() {
				this.isHidden = !this.isHidden;

				if (!this.isHidden) {
					this.eyeImg = '/static/ssmall/eye-pre@3x.png';
				} else {
					this.eyeImg = '/static/ssmall/eye@3x.png';
				}
			},
			tologin() {
				if (this.phoneNum == "" || this.password == "") {
					uni.showToast({
						title: '请输入手机号和密码',
						icon: 'none'
					});
					return;
				} else {
					this.logining = true;
					// uni.showLoading({
					// 	title: '登录中...'
					// })

					let data = {
						"username": this.phoneNum,
						"password": this.password
					}

					uni.request({
						url: 'http://218.5.2.10:12680/ec-social/mobile/login',
						method: 'POST',
						data: data,
						success: res => {
							uni.hideLoading();
							console.log(res.data);

							let statusCode = res.data.head.status;
							let message = res.data.head.message;
							if (statusCode == '403') {
								this.$api.msg(message);
							} else {
								console.log(res.data.body);

								let userInfo = res.data.body;
								this.login(userInfo);
								this.logining = false;
								this.$api.msg('登录成功');
								this.getCartSize();

								setTimeout(() => {
									uni.navigateBack();
								}, 1000)
							}
						},
						fail: (err) => {

							this.$api.msg('登录失败');
							console.log("err: ", err.message);
						},
						complete: () => {}
					})

				}
			},
			wxlogin() {
				uni.login({
					provider: 'weixin',
					success: (res) => {

						uni.getUserInfo({
							provider: 'weixin',
							success: function(res) {
								uni.$emit('login', res.userInfo);

								uni.setStorage({
									key: 'userinfo',
									data: res.userInfo
								})
							}
						})

						uni.showToast({
							title: '登录成功',
							icon: 'none',
							position: 'bottom'
						});

						setTimeout(() => {
							uni.navigateBack()
						}, 1000);
					},
					fail: () => {
						uni.showToast({
							title: '登录失败',
							icon: 'none'
						});
					}
				})
			},
			async getCartSize() {
				let res = await this.helper.requestAPI(this.api.cartsize);
				let cartSize = res.body.cartSize;
				uni.setTabBarBadge({
					index: 2,
					text: cartSize.toString()
				})
			}
		}
	}
</script>

<style lang="scss">
	page {
		background: #F6F6F6;
	}

	.content {
		padding-top: 168rpx;
		position: relative;
		width: 100vw;
		height: 100vh;
		overflow: hidden;
	}

	.logo {
		display: flex;
		justify-content: center;

		image {
			width: 246rpx;
			height: 110rpx;
		}
	}

	.login-item {
		margin-top: 106rpx;
		padding: 0 10%;
	}

	.phone,
	.password {
		display: flex;
		align-items: center;

		background-color: white;
		height: 90rpx;
		width: 100%;
		padding: 25rpx 45rpx;
		border-radius: 45rpx;
	}

	.phone {
		image {
			width: 27rpx;
			height: 40rpx;
		}
	}

	.password {
		margin-top: 20rpx;

		image {
			width: 38rpx;
			height: 40rpx;
		}
	}

	.input-item {
		padding-left: 50rpx;
		padding-right: 20rpx;
		margin-right: 30rpx;
	}

	.login-button {
		margin-top: 76rpx;
		width: 80%;
		height: 90rpx;
		border-radius: 45rpx;
		background: $base-color;
		color: white;
	}

	.quickly-login {
		display: flex;
		justify-content: center;
		align-items: center;
		margin-top: 207rpx;

		.title {
			color: $uni-text-color-grey;
			font-size: $uni-font-size-sm;
			width: 100rpx;
		}

		.line {
			height: 1rpx;
			background-color: #EFEFEF;
			width: 150rpx;
			margin: 0 30rpx;
		}
	}

	.thirdlogin {
		display: flex;
		justify-content: center;
		margin-top: 20rpx;

		image {
			width: 80rpx;
			height: 80rpx;
		}
	}
</style>
